<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>Test</title>

    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .block {
            background-color: #0000006F;
            padding: 16px;
        }

        input[type=button] {
            border: none;
            background-color: #1188FF;
            padding: 4px 16px;
            display: block;
            color: white;
            width: 100%;
            height: 48px;
            margin-bottom: 8px;
        }

        input[type=button]:hover {
            cursor: pointer;
        }

        input[type=button]:active {
            background-color: #2198FF;
        }
    </style>
</head>

<body>
    <input type="button" value="QQ" onclick="qq()" />
    <input type="button" value="Show Text HUD" onclick="showTextHud()" />

    <input type="button" value="Show HUD" onclick="showHUD()" />
    <input type="button" value="Hide HUD" onclick="hideHUD()" />

    <input type="button" value="Set Storage" onclick="setStorage()" />
    <input type="button" value="Get Storage" onclick="getStorage()" />

    <input type="button" value="Set Cache" onclick="setCache()" />
    <input type="button" value="Get Cache" onclick="getCache()" />

    <input type="button" value="Save Image To Album" onclick="saveImageToAlbum()" />
    <input type="button" value="Show Alert Dialog" onclick="showAlert()" />

    <input type="button" value="Set StatusBar Color" onclick="setStatusBarColor()" />
    <input type="button" value="Show/Hide StatusBar" onclick="hideStatusBar()" />

    <input type="button" value="Set Toolbar Color" onclick="setToolbarColor()" />
    <input type="button" value="Show/Hide Toolbar" onclick="hideToolbar()" />
    <input type="button" value="Set Title" onclick="setTitle()" />
    <input type="button" value="Set Back Image" onclick="setBackImage()" />
    <input type="button" value="Set Close Title" onclick="setCloseTitle()" />

    <input type="button" value="Err" onclick="err()" />

    <list id="list"></list>

    <script language="javascript" type="text/javascript" src="./bridge.js"></script>
    <script>
        let msg = "main(2): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.iyoyi.itky/com.iyoyi.itky.ui.splash.SplashActivity}: andr\
android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2976)\
android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3113)\
android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)\
android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:113)\
android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:71)\
android.app.ActivityThread$H.handleMessage(ActivityThread.java:1858)\
android.os.Handler.dispatchMessage(Handler.java:106)\
android.os.Looper.loop(Looper.java:201)\
android.app.ActivityThread.main(ActivityThread.java:6820)\
java.lang.reflect.Method.invoke(Native Method)\
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)\
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:922)"
        let layBottom = false;

        let listview = document.getElementById('list');

        window.$hybrid.register("addItem", function (data, callback) {
            let item = document.createElement('li');
            item.innerText = data;
            listview.appendChild(item);

            if (callback) callback('list size: ' + listview.children.length);
        });

        function qq() {
            window.location.href = "https://www.qq.com"
        }

        function showTextHud() {
            let params = {
                text: msg,
                duration: 3000,
                bottom: layBottom
            };
            call('showTextHud', params, function (resp) {
                console.log(resp);
            });
            layBottom = !layBottom;
        }

        function setStorage() {
            let params = {
                key: 'key_time',
                value: 'cvcvdddddddddddddddd'
            };
            call('setStorage', params, function (resp) {
                console.log(resp);
            });
        }

        function getStorage() {
            let params = { key: 'key_time' };
            call('getStorage', params, function (resp) {
                console.log(resp);
            });
        }

        function setCache() {
            let params = {
                key: 'cache_key',
                value: 'xxxxxxxxxxxxxxxxxxxxxxxxb',
                expires: 3
            };
            call('setCache', params, function (resp) {
                console.log(resp);
            });
        }

        function getCache() {
            let params = { key: 'cache_key' };
            call('getCache', params, function (resp) {
                console.log(resp);
            });
        }

        function showHUD() {
            call('showHUD', null, function (resp) {
                console.log(resp);
            });
        }

        function hideHUD() {
            call('hideHUD', null, function (resp) {
                console.log(resp);
            });
        }

        function saveImageToAlbum() {
            let params = {
                url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589869103676&di=050e0ac00adda0a054690fca9a6af1b9&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F3806b4c17c44388a06a8e6528e581fecb9922d36.jpg'
            };
            call('saveImageToAlbum', params, callback);
        }

        function showAlert() {
            let params = {
                title: 'Someeee',
                message: 'vvvddf dfdfsdf',
                confirmTitle: 'Ok',
                cancelTitle: 'No'
            };
            call('showAlert', params, callback);
        }

        function setStatusBarColor() {
            let params = {
                statusBarColor: 0xFFFF0000
            };
            call('setViewConfig', params, callback);
        }

        let statusBar = true;
        function hideStatusBar() {
            let params = {
                hideStatusBar: statusBar
            };
            statusBar = !statusBar;
            call('setViewConfig', params, callback);
        }

        function setToolbarColor() {
            let params = {
                navBarBackgroundColor: 0xFFFF0000
            };
            call('setViewConfig', params, callback);
        }

        let toolbar = true;
        function hideToolbar() {
            let params = {
                hideNavBar: toolbar
            };
            toolbar = !toolbar;
            call('setViewConfig', params, callback);
        }

        function setTitle() {
            let params = {
                title: 'Bbbbbbbbbb'
            };
            call('setViewConfig', params, callback);
        }

        function setBackImage() {
            let params = {
                backButtonImage: 'ic_close'
            };
            call('setViewConfig', params, callback);
        }

        function setCloseTitle() {
            let params = {
                closeButtonTitle: '关闭'
            };
            call('setViewConfig', params, callback);
        }

        function call(name, params, cb) {
            if (params) {
                params = JSON.stringify(params);
            }
            window.$hybrid.call(name, params, cb);
        }

        function callback(resp) {
            console.log(resp);
        }

        function err() {
            $hybrid.channel.src = 'hybrid://bbbbbbbbbbbbbb';
        }
    </script>
</body>

</html>